<!-- 首页 - 网站的主页，展示博客介绍和导航入口 -->
<template>
    <div class="home">
        <!-- 统一导航栏组件 -->
        <AppHeader />

        <!-- 主要内容区域 - 展示博客介绍和主要功能入口 -->
        <main class="main-content">
            <!-- 英雄区域 - 网站的主要展示区域 -->
            <div class="hero-section">
                <!-- 背景遮罩层 - 提供视觉层次和可读性 -->
                <div class="hero-overlay">
                    <!-- 主要内容文本区域 -->
                    <div class="hero-text">
                        <!-- 网站主标题 -->
                        <h1 class="hero-title">零の守墓人的博客</h1>
                        <!-- 网站副标题 - 描述博客的主要内容 -->
                        <p class="hero-subtitle">主要记录自己日常开发和生活中碰到的问题和感想</p>
                        <!-- 主要操作按钮区域 -->
                        <div class="hero-actions">
                            <!-- 浏览博客按钮 - 跳转到博客页面 -->
                            <router-link to="/blog" class="hero-btn primary">浏览博客</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 统一页脚组件 -->
        <AppFooter />
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

// 自定义组件导入
import AppHeader from '../components/AppHeader.vue'  // 统一导航栏组件
import AppFooter from '../components/AppFooter.vue'  // 统一页脚组件
</script>

<style scoped lang="scss">
// 导入首页组件样式
@use '../assets/styles/clients/_home';
</style>